<template>
	<view class="container">
		<view class="bg"></view>
		<!-- #ifdef MP-WEIXIN  -->
		<swiper class="swiper" :current="current" previous-margin="40rpx" next-margin="40rpx"
			@change="swiper_change($event)">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN  -->
			<swiper class="swiper" :current="current" previous-margin="20rpx" next-margin="20rpx"
				@change="swiper_change($event)">
				<!-- #endif -->
			<swiper-item v-for="(item , index) in homeSlide"  :key="index">
				<view class="jinpai-banner" :style="{backgroundImage:'url(' + item + ')'}">
					<view v-if="current==vipFlag" class="jinpai-banner-title">当前身份</view>
					<text class="jinpai-banner-text" v-if="current==0">普通临时工</text>
					<text class="jinpai-banner-text-jinpai" v-if="current==1">金牌临时工</text>
					<text class="jinpai-banner-text-jinpai-youxiao" v-if="current==0">{{vipFlag==1?'暂无此身份':''}}</text>
					<text class="jinpai-banner-text-jinpai-youxiao"
						v-if="current==1">{{vipFlag==0?'暂无此身份':vipTime?'有效期至'+vipTime+'，还剩'+expirationTime+'天':'已过期'}}</text>
					<text class="jinpai-banner-text-bottom">升级金牌可享更多权益</text>
				</view>
			</swiper-item>
		</swiper>

		<goldMedalCom :jinpaiType="current" :vipFlag="vipFlag" @isPay="isPay()">
		</goldMedalCom>

		<goldMedalPay v-if="isShowPay" @closePayPage="closePayPage($event)"></goldMedalPay>
		<kefu v-if="isShowKefu" @closePage="closePage()"></kefu>
	</view>
</template>

<script>
	import goldMedalCom from './components/gold-medal-com/gold-medal-com'
	import goldMedalPay from './components/gold-medal-com/gold-medal-pay'
	import kefu from '../../components/xjbg/kefu.vue'
	import {
		getUserInfo,
		get_property_list_by_type
	} from '@/libs/unit.js'
	export default {
		props: {

		},

		components: {
			goldMedalCom,
			goldMedalPay,
			kefu,
		},

		data() {
			return {
				homeSlide: ['http://images.linglinggong.net/icon3/putong111212.png', 'http://images.linglinggong.net/icon3/jinpai1111.png'],
				current: 0,
				isShowKefu: false,
				telephone: '', //客服电话
				vipFlag: 0,
				vipTime: '',
				expirationTime: '',
				isShowPay: false,
			}
		},
		methods: {
			swiper_change(event) {
				this.current = event.detail.current
			},
			kefu_phone() {
				uni.makePhoneCall({
					phoneNumber: this.telephone
				})
			},
			closePage() {
				this.isShowKefu=false
			},
			computationTime() {
				let userInfo = uni.getStorageSync('userInfo');
				let d = new Date(),
					y = d.getFullYear(),
					m = d.getMonth() + 1
				let toDay = d.getDate()
				let lastDay = new Date(y, m, 0).getDate()
				this.vipTime=userInfo.vipEndDate;
				this.expirationTime = userInfo.vipRemainingTime;
			},
			closePayPage(flag) {
				this.isShowPay = false
				if (flag) {
					getUserInfo()
					this.vipFlag = flag
					this.current = this.vipFlag
				}
			},
			isPay() {
				this.isShowPay = true
			},
		},
		onLoad() {

		},
		onShow() {
			if (uni.getStorageSync('property_list_by_type').telephone) {
				this.telephone = uni.getStorageSync('property_list_by_type').telephone
			} else {
				let res = get_property_list_by_type()
				this.telephone = res.telephone
			}
			this.vipFlag = uni.getStorageSync('userInfo').user.vipFlag
			this.current = this.vipFlag
			uni.setNavigationBarTitle({
				title: this.vipFlag == 1 ? '金牌临时工' : '普通临时工'
			})
			this.computationTime()
		},
		onNavigationBarButtonTap() {
			this.isShowKefu = true
		},
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F2F2F2
	}

	.container {
		&>.bg {
			height: 244rpx;
			display: flex;
			justify-content: flex-end;
			position: relative;
			overflow: hidden;


			//椭圆
			&::after {
				content: "";
				position: absolute;
				width: 200%;
				height: 274rpx;
				border-radius: 100%;
				left: -50%;
				top: -30rpx;
				background-color: #1B223C;
				// background: linear-gradient(45deg, #111832, #343B54);
			}
		}
	}

	.swiper {
		width: 750rpx;
		height: 340rpx;
		margin-top: -180rpx;
		swiper-item{
			width: 658rpx;
			margin: 0 ;
		}
	}

	.jinpai-banner {
		width: 658rpx;
		height: 340rpx;
		border-radius: 24rpx;
		background-repeat: round;
		margin: 0 auto;
	}

	.jinpai-banner-title {
		width: 156rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, .1);
		border-radius: 24rpx 0 24rpx 0;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		position: absolute;
	}

	.jinpai-banner-text {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-shadow: 0px 0px 8rpx rgba(255, 32, 25, 0.4);
		display: inline-block;
		margin: 76rpx 0 20rpx 30rpx;
	}

	.jinpai-banner-text-jinpai {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		// text-shadow: 0px 0px 8rpx rgba(147, 3, 0, 0.4);
		background: linear-gradient(-90deg, #FEDBBA 0%, #FFF8EB 99.12109375%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		display: inline-block;
		margin: 76rpx 0 20rpx 30rpx;
	}

	.jinpai-banner-text-jinpai-youxiao {
		font-size: 24rpx;
		font-weight: 500;
		color: #402110;
		background: linear-gradient(-90deg, #FEDBBA 0%, #FFF8EB 99.12109375%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		display: block;
		margin: 20rpx 30rpx;
	}

	.jinpai-banner-text-bottom {
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		display: block;
		position: absolute;
		margin-left: 32rpx;
		bottom: 40rpx;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.alert_model {
		width: 550rpx;
		height: 306rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.alert_model-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		margin-top: 60rpx;
	}

	.alert_model-content {
		font-size: 32rpx;
		font-weight: 500;
		color: #787878;
		flex: 1;
		margin-top: 40rpx;
	}

	.alert_model-button {
		height: 80rpx;
		border-top: 1rpx solid #BDBDBD;
		display: flex;
		justify-content: space-between;
	}

	.alert_model-button-quxiao {
		width: 274rpx;
		height: 80rpx;
		border-right: 1rpx solid #BDBDBD;
		font-size: 32rpx;
		font-weight: 500;
		color: #787878;
		line-height: 80rpx;
		text-align: center;
	}

	.alert_model-button-queding {
		width: 275rpx;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #4E9800;
		line-height: 80rpx;
		text-align: center;
	}
</style>
